<template>
    <div class="my-button">
        <my-nav-bar
            fixed
            title="按钮，兄弟"
            left-text="返回"
            right-text="按钮"
            @click-left="onClickLeft"
            @click-right="onClickRight"
        ></my-nav-bar>
        <h2 class="title" style="margin-top: 46px;">按钮类型</h2>
        <div class="btn-box">
            <my-button>默认按钮</my-button>
            <my-button type="primary" @click="handleClick" @touchstart="handleTouchstart">主要按钮</my-button>
            <my-button type="info">信息按钮</my-button>
            <my-button type="danger">危险按钮</my-button>
            <my-button type="warning">警告按钮</my-button>
        </div>
        <h2 class="title">朴素按钮</h2>
        <div class="btn-box">
            <my-button type="primary" plain>主要按钮</my-button>
            <my-button type="info" plain>信息按钮</my-button>
            <my-button type="danger" plain>危险按钮</my-button>
        </div>
        <h2 class="title">细边框</h2>
        <div class="btn-box">
            <my-button type="primary" plain hairline>主要按钮</my-button>
            <my-button type="info" plain hairline>信息按钮</my-button>
            <my-button type="danger" plain hairline>危险按钮</my-button>
        </div>
        <h2 class="title">禁用</h2>
        <div class="btn-box">
            <my-button type="primary" disabled>主要按钮</my-button>
            <my-button type="info" disabled>信息按钮</my-button>
            <my-button type="danger" disabled>危险按钮</my-button>
        </div>
        <h2 class="title">按钮形状</h2>
        <div class="btn-box">
            <my-button type="primary" square>方形按钮</my-button>
            <my-button type="danger" round>圆形按钮</my-button>
        </div>
        <h2 class="title">块形按钮</h2>
        <div class="btn-box">
            <my-button type="primary" block>按钮1</my-button>
            <my-button type="danger" block>按钮2</my-button>
        </div>
        <h2 class="title">按钮尺寸</h2>
        <div class="btn-box">
            <my-button type="primary" size="large">大按钮</my-button>
            <my-button type="info">正常按钮</my-button>
            <my-button type="danger" size="small">小按钮</my-button>
            <my-button type="warning" size="mini">迷你按钮</my-button>
        </div>
    </div>
</template>
<script>
export default {
     data() {
    return {
    };
  },
  methods: {
    onClickLeft() {
      this.$router.$go(-1)
    },

    onClickRight() {
      console.log("right");
    },

    handleClick() {
        console.log('handleClick')
    },

    handleTouchstart() {
        console.log('handleTouchstart')
    }
  }
}
</script>
